<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义题库</title>
    <link rel="stylesheet" href="../../css/question_bank.css">
    <script src="../../scripts/question_bank.js" defer></script>
</head>
<body>

    <div class="loading">
        <svg viewbox='0 0 50 50'>
        <circle r='25' cx='25' cy='25'></circle>
        </svg>
        <p>LOADING</p>
    </div>

    <div>
        <p onclick="loading.in('../../../index.html')">Index</p>
    </div>

    <div class="container">
        <h1>自定义题库</h1>

        <p id="writer"><em>written by SAKANA</em></p>

        <!-- 注意事项 -->
        <p>题目由JavaScript读取json字符串</p>
        <p>例如</p>
        <p class="code">
            <span class="braces">{</span> 
            <span class="key">"question"</span><span class="colon">:</span> <span class="string">"What is the capital of France?"</span><span class="comma">,</span> 
            <span class="key">"options"</span><span class="colon">:</span> <span class="brackets">[</span><span class="string">"Paris"</span><span class="comma">,</span> <span class="string">"London"</span><span class="comma">,</span> <span class="string">"Berlin"</span><span class="comma">,</span> <span class="string">"Madrid"</span><span class="brackets">]</span><span class="comma">,</span> 
            <span class="key">"answer"</span><span class="colon">:</span> <span class="string">"Paris"</span> 
            <span class="braces">}</span>
        </p>

        <button id="add-question-btn">Add Question</button>

        <!-- 管理按钮 -->
        <div class="container">
            <button id="view-storage-btn">View Storage</button>
            <button id="clear-storage-btn">Clear Storage</button>
        </div>

        <div class="container">
            <h2>1.2JSON 转换</h2>
            <label class="input-field">
                Paste your question here:
                <textarea id="question-text" rows="10" cols="50" placeholder="Enter the question, options, and answer"></textarea>
            </label>
            <button id="convert-btn">Convert to JSON</button>
            <div class="output" id="output"></div>
        </div>
        
        <!-- 选择题列表 -->
        <div id="question-list"></div>
    </div>

    
</body>
</html>
